let box = document.querySelector('.box');
let smallbox = document.querySelector('.smallBox');
let mask = document.querySelector('.mask')
let bigbox = document.querySelector('.bigBox');
let img = document.querySelector('.bigBox>img')

mask.addEventListener('mousemove',function(e){

  let maskMax = smallbox.offsetWidth - mask.offsetWidth;
  let X = e.pageX - box.offsetLeft - mask.offsetWidth / 2
  let Y = e.pageY - box.offsetTop - mask.offsetHeight / 2
  if(X < 0){
    X  = 0;
  }else if(X >= maskMax){
  X = maskMax
  }

  if(Y < 0){
    Y  = 0;
  }else if(Y >= smallbox.offsetHeight - mask.offsetHeight){
    Y = smallbox.offsetHeight - mask.offsetHeight
  }

  mask.style.left = X + 'px'
  mask.style.top = Y + 'px'

  img.style.transform = `translate(${-X*4}px,${-Y*4}px)`;
})
